<template>
  <div class="top-menu" ref="topMenu">
    <el-menu
      :default-active="activeIndex + ''"
      ref="elMenuDom"
      background-color="#021429"
      text-color="#fff"
      active-text-color="#fff"
      mode="horizontal"
    >
      <template v-for="(item, index) in items">
        <el-menu-item :index="index + ''" @click.native="openMenu(index, item)" :key="index" v-show="!item.hide">
          <template slot="title">
            <i :class="item.f_Icon"></i>
            <span>{{ $t(item.f_FullName) }}</span>
          </template>
        </el-menu-item>
      </template>
      <el-submenu v-if="subItems.length > 0" index="1000" popper-class="top-more-menu">
        <template slot="title"><i class="el-icon-more"></i></template>
        <template v-for="(item, index) in subItems">
          <el-menu-item
            :index="'1000' + index"
            @click.native="openMenu(items.length + index + 1, item)"
            :key="'1000' + index"
          >
            <template slot="title">
              <i :class="item.f_Icon"></i>
              <span>{{ $t(item.f_FullName) }}</span>
            </template>
          </el-menu-item>
        </template>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
const getWidth = (elem) => {
  let width = elem && typeof elem.getBoundingClientRect === "function" && elem.getBoundingClientRect().width;
  if (width) {
    width = +width.toFixed(6);
  }
  return width || 0;
};

export default {
  name: "top-menu",
  data() {
    return {
      activeIndex: 0,
      subItems: [],
      menuIndex: 0,
    };
  },
  inject: ["top"],
  created() {
    //this.getMenu();
  },
  mounted() {},
  computed: {
    ...mapGetters(["tagCurrent", "modulesGroup", "screen"]),
    items() {
      const modules = this.modulesGroup["0"] || [];
      const res = modules.filter((item) => {
        if (item.f_EnabledMark == 1 && item.f_IsMenu == 1) {
          if (this.loginInfo.f_SecurityLevel == 1) {
            return true;
          } else {
            const moduleAuthIds = this.loginInfo.moduleAuthIds || [];
            if (moduleAuthIds.indexOf(item.f_ModuleId) > -1) {
              return true;
            } else {
              return false;
            }
          }
        }
      });
      return res;
    },
  },
  watch: {
    screen: function (val) {
      this.setChildrenWidthAndResize(val);
    },
  },
  methods: {
    openMenu(index, item) {
      this.menuIndex = index;
      this.$store.commit("system/module/setMenu", this.modulesGroup[item.f_ModuleId] || []);
    },
    initTopMenu() {
      this.$nextTick(() => {
        setTimeout(() => {
          let _index = 0;
          if (this.items && this.items.length > 0) {
            this.items.forEach((item) => {
              item.hide = false;
            });
            this.openMenu(this.menuIndex, this.items[this.menuIndex]);
          }
          this.$refs.elMenuDom.$children.forEach((ele) => {
            var item = this.items[_index];
            if (item) {
              item.width = getWidth(ele.$el);
              _index++;
            }
          });
          this.setChildrenWidthAndResize(this.screen);
        }, 10);
      });
    },
    setChildrenWidthAndResize(bodyWidth) {
      let menuWidth = bodyWidth - getWidth(this.top.$refs.topLogo) - 232 - 176 - 8;
      let _menuWidth = 0;
      let _subItems = [];
      let len = this.items.length;
      let index = 1;
      //console.log(bodyWidth,menuWidth,'bodyWidth')
      this.items.forEach((item) => {
        _menuWidth += item.width;
        //console.log(_menuWidth,'_menuWidth')
        if (_menuWidth > menuWidth || (_menuWidth + 56 > menuWidth && len > index)) {
          item.hide = true;
          _subItems.push(item);
        } else {
          item.hide = false;
        }
        index++;
      });
      this.subItems = _subItems;

      //console.log(this.subItems,this.items,'this.subItems')
    },
  },
};
</script>
